<!--  -->
<template>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" 
        background-color='#5c5464' 
        text-color="#fff"
        active-text-color="#ffd04b"
        @open="handleOpen" @close="handleClose" :collapse="isCollapse">
        <h3>{{isCollapse ? '后台':'水果商城后台管理系统'}}</h3>
        <el-menu-item @click="clickMenu(item)" v-for="item in noChildren" :key="item.path" :index="item.path" >
            <i :class="'el-icon-'+item.icon"></i>
            <span slot="title">{{item.label}}</span>
        </el-menu-item>
        <el-submenu v-for="item in hasChildren" :key="item.path" index="item.path">
            <template slot="title">
                <i :class="'el-icon-'+item.icon"></i>
                <span slot="title">{{item.label}}</span>
            </template>
            <el-menu-item-group v-for="(subItem,subIndex) in item.children" :key="subItem.path">
                <el-menu-item :index="subIndex">{{subItem.label}}</el-menu-item>
            </el-menu-item-group>
        </el-submenu>
    </el-menu>
</template>
<style lang="less" scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  } 
  .el-menu{
      height: 100%;
      border: none;
      h3 {
          color: #fff;
          text-align: center;
          line-height: 48px;
      }
  }
</style>

<script>
  export default {
    data() {
      return {
        menu:[
            {
               path: '/',
               name: 'home',
               label: '首页',
               icon: 's-home',
               url:'Home/Home'
            },
            {
               path: '/mall ',
               name: 'mall',
               label:'商品管理',
               icon: 'video-play',
               url: 'MallManage/MallManage '
            },
            {
                path: '/user',
                name: 'user',
                label:'用户管理',
                icon: 'user',
                url: 'UserManage/UserManage'
            },
            {
                path: '/ordera',
                name: 'ordera',
                label:'订单管理',
                icon: 's-order',
                url: 'OrderManage/OrderManage'
            },
            {
                path: '/logistic',
                name: 'logistic',
                label:'物流管理',
                icon: 'present',
                url: 'OrderManage/OrderManage'
            },
            {
                path: '/coupan',
                name: 'coupan',
                label:'优惠券管理',
                icon: 's-ticket',
                url: 'OrderManage/OrderManage'
            },
            {
                path: '/money',
                name: 'money',
                label:'资金管理',
                icon: 'edit-outline',
                url: 'OrderManage/OrderManage'
            },
            {
                path: '/refund',
                name: 'refund',
                label:'退货/款管理',
                icon: 'edit',
                url: 'OrderManage/OrderManage'
            },
            // {
            //     path: '/test',
            //     name: 'test',
            //     label:'用来测试',
            //     icon: 'edit-outline',
            //     url: 'OrderManage/OrderManage'
            // },
            // {
            //     path: '/shop',
            //     name: 'shop',
            //     label:'用来测试购物车',
            //     icon: 'edit-outline',
            //     url: 'OrderManage/OrderManage'
            // },
            // {
            //     path: '/testshop',
            //     name: 'testshop',
            //     label:'用来测试其他',
            //     icon: 'edit-outline',
            //     url: 'OrderManage/OrderManage'
            // },
          
            // {
            //     label:'其他',
            //     icon: 'location',
            //     children:[
            //         {
            //            path: '/page1',
            //            name: 'page1',
            //            label:'页面1',
            //            icon:'setting',
            //            url: 'Other/PageOne'
            //         },
            //         {
            //             path:'/page2',
            //             name: 'page2',
            //             label:'页面2',
            //             icon: 'setting',
            //             url: 'Other/PageTwo'
            //         }
                   
            //     ]
            // }
           
        ]
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      clickMenu(item){
          this.$router.push({
              name :item.name
          })
      }
    },
    computed:{
        noChildren(){
            return this.menu.filter(item=>!item.children)
        },
        hasChildren(){
            return this.menu.filter(item=>item.children)
        },
        isCollapse(){
          return this.$store.state.tab.isCollapse
        }
    }
  }
</script>
